import React, { useEffect, useState } from 'react';
import { Row, Col, Card, Statistic, Table, message } from 'antd';
import { Line, Pie } from '@ant-design/plots';
import { dashboard } from '../services/api';

interface DashboardStats {
  totalOrders: number;
  todaySales: number;
  topProduct: {
    name: string;
    sales: number;
  };
  recentOrders: any[];
}

interface SalesData {
  date: string;
  sales: number;
}

interface CategoryData {
  category: string;
  value: number;
}

const Dashboard: React.FC = () => {
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [salesData, setSalesData] = useState<SalesData[]>([]);
  const [categoryData, setCategoryData] = useState<CategoryData[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [statsRes, salesRes, categoryRes] = await Promise.all([
          dashboard.getStats(),
          dashboard.getSalesData(),
          dashboard.getCategoryStats(),
        ]);

        setStats(statsRes.data);
        setSalesData(salesRes.data);
        setCategoryData(categoryRes.data);
      } catch (error) {
        message.error('获取数据失败！');
      }
    };

    fetchData();
  }, []);

  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderId',
      key: 'orderId',
    },
    {
      title: '客户',
      dataIndex: 'customer',
      key: 'customer',
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount: number) => `¥${amount.toFixed(2)}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
  ];

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <Card>
            <Statistic
              title="未发货订单"
              value={stats?.totalOrders || 0}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="今日销售额"
              value={stats?.todaySales || 0}
              prefix="¥"
              precision={2}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="最高销售额产品"
              value={stats?.topProduct?.sales || 0}
              prefix="¥"
              precision={2}
              suffix={stats?.topProduct?.name ? ` (${stats.topProduct.name})` : ''}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col span={16}>
          <Card title="近七个月销售趋势">
            <Line
              data={salesData}
              xField="date"
              yField="sales"
              point={{
                size: 5,
                shape: 'diamond',
              }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="分类销售占比">
            <Pie
              data={categoryData}
              angleField="value"
              colorField="category"
              radius={0.8}
              label={{
                type: 'outer',
              }}
            />
          </Card>
        </Col>
      </Row>

      <Card title="最近订单" style={{ marginTop: 16 }}>
        <Table
          columns={columns}
          dataSource={stats?.recentOrders || []}
          rowKey="orderId"
          pagination={false}
        />
      </Card>
    </div>
  );
};

export default Dashboard; 